<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #data {
        width: 280px;
        border: 1px solid #000;
        margin: 20px auto;
    }

    #data p {
        display: flex;
    }

    #data h5 {
        text-align: center;
    }

    #data p span {
        padding: 0 10px;
    }

    #prev,
    #next {
        cursor: pointer;
    }

    #nian {
        flex: 1;
        text-align: center;
    }

    #title {
        overflow: hidden;
        list-style: none;
        background-color: #ccc;
    }

    #title li {
        float: left;
        width: 10px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        padding: 0 15px;
    }

    #date {
        overflow: hidden;
        list-style: none;
    }

    #date li {
        float: left;
        width: 34px;
        height: 34px;
        margin: 1px 1px;
        border: 2px solid rgba(0, 0, 0, 0);
        line-height: 34px;
        text-align: center;
        cursor: pointer;
    }

    #date li:hover {
        /* border: 2px solid red; */
        background-color: rgb(199, 223, 209);
    }

    .active {
        color: rgb(240, 159, 10);
    }
</style>

<body>
    <div id="data">
        <p>
            <span id="prev">上一月</span>
            <span id="nian">2022</span>
            <span id="next">下一月</span>
        </p>
        <h5 id="yue">九月</h5>
        <ul id="title">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul id="date"></ul>
    </div>
</body>
<script>
    var data = new Date();
    add();

    function add() {
        var cyear = data.getFullYear();
        var cmonth = data.getMonth();
        var weekday = data.getDay();
        var cday = data.getDate();
        // console.log(cday);

        // console.log(weekday);

        var days = new Date(cyear, cmonth + 1, 0).getDate();
        // console.log(days);


        var arr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

        // console.log(cmonth);


        var year = document.getElementById('nian');
        var month = document.getElementById('yue');
        var tian = document.getElementById('date');
        var prev = document.getElementById('prev');

        var next = document.getElementById('next');



        var html = '';

        year.innerHTML = cyear;
        yue.innerHTML = arr[cmonth];
        for (var j = 0; j < weekday; j++) {
            html += '<li></li>';
        }
        for (var i = 1; i <= days; i++) {
            if (i == cday) {
                html += '<li class="active">' + i + '</li>';
            } else {
                html += '<li>' + i + '</li>';
            }
        }
        tian.innerHTML = html;
        prev.onclick = function () {
            data.setMonth(cmonth - 1);
            add();
        }
        next.onclick = function () {
            data.setMonth(cmonth + 1);
            add();
        }

    }


</script>

</html>